<script setup>

import api from './api.js'
import { useRouter } from "vue-router";
import eventbus from "@/utils/eventbus.js";
import CategorySelect from "@/components/Consume/CategorySelect.vue";

const emit = defineEmits(['sub']);

const router = useRouter();
const { proxy } = getCurrentInstance();

const openFlag = ref(false);

const formData = reactive({
  id: null,
  draft: 0,
  normal: 0,
  numReal: 0,
  barcode: null,

});

const rules = {
  numReal: {
    required: true, message: '不能为空', trigger: "blur"
  }
}

function open(row) {
  Object.assign(formData, row);
  formData.numReal = row.num;
  openFlag.value = true;
}

function close() {
  openFlag.value = false;
}

function confirm() {

  api.inventory({...formData}).then(()=> {

    emit('sub');
    close()

  })
}

function showImg(img) {
  return import.meta.env.VITE_APP_BASE_API + img;
}

defineExpose({
  open
})

</script>

<template>
  <div>
    <el-dialog width="50%" title="提示" v-model="openFlag" align-center top="50">
      <el-form ref="form" :model="formData" :rules="rules" label-width="80px" class="dialog-form-two">

        <el-row>
          <el-col :span="8">
            <el-form-item label="仓库" prop="warehouseName">
              <el-input disabled v-model="formData.warehouseName" placeholder="自动生成" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="应盘数量" prop="num">
              <el-input disabled v-model.trim="formData.num" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="应盘金额" prop="totalPrice">
              <el-input disabled v-model.trim="formData.totalPrice" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="实盘数量" prop="numReal">
              <el-input v-model="formData.numReal" oninput="value=value.replace(/^\.+|[^\d.]/g,'')" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="编码" prop="number">
              <el-input disabled v-model="formData.number" placeholder="自动生成" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="名称" prop="name">
              <el-input disabled v-model.trim="formData.name" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="分类" prop="categoryId">
              <category-select disabled v-model="formData.categoryId"></category-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="条码" prop="barcode">
              <el-input disabled v-model.trim="formData.barcode" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="品牌" prop="brand">
              <el-input disabled v-model.trim="formData.brand" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="规格型号" prop="model">
              <el-input disabled v-model.trim="formData.model" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>

          <el-col :span="8">
            <el-form-item label="单价" prop="price">
              <el-input disabled v-model.trim="formData.price" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item disabled label="计量单位" prop="model">
              <el-input disabled v-model.trim="formData.unit" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" v-model="formData.remark"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="图片" prop="imgUrl">
              <img alt="" v-if="formData.imgUrl" :src="showImg(formData.imgUrl)" width="80" height="80" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-row type="flex" justify="end">
          <el-button type="primary" @click="confirm">确定</el-button>
          <el-button @click="close">取 消</el-button>
        </el-row>

      </div>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">

</style>